<script setup>
import Editor from "@/components/editor.vue";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getUserInfoBase, useInfoStore} from "@/stores/user.js";
import Http from "@/http/http.js";
import moment from "moment";
import {filterTreeNode, getImgUrl} from "@/until/tool.js";
import XEUtils from "xe-utils";
import EditImage from "@/components/editImage.vue";
import {Message} from "@arco-design/web-vue";

const isEditImage = ref(false)
const editor = ref()
const router = useRouter()
const typeTreeData = ref([])
const typeData = ref([])
const TypeIdArr = ref([])
const userParams = router.currentRoute.value.query
const userData = getUserInfoBase()
const formData = ref({
  ServiceId: 0, TypeId: 0, ServiceTitle: null, ServiceSubTitle: null, ServiceDes: null, ServiceImg: null, ServiceCon: null, ClicksNumber: 0,
  Recommend: false, Hot: false, UserAccount: userData.UserAccount, CreateTime: moment()
})


onMounted(() => {
  if (Object.keys(userParams).length > 0) {
    formData.value.ServiceId = Number(userParams.ServiceId)
    getNewsContent()
  }
  formData.value.ServiceCon = editor.value.content
  getNewsType()
})

const getNewsContent = async () => {
  const res = await Http.service({ServiceId: formData.value.ServiceId})
  if (res.Data) {
    formData.value = res.Data[0]
    TypeIdArr.value = [];
    if (formData.value.TypeId) {
      TypeIdArr.value = formData.value.TypeId.split(',')
      formData.value.TypeId = Number(TypeIdArr.value[1])
    }
    formData.value.CreateTime = moment(formData.value.CreateTime)
  }
}
const getNewsType = async () => {
  const res = await Http.serviceType()
  typeData.value = res['Data']
  typeTreeData.value = [{TypeId: 0, TypeName: "所有分类", parentId: 1}, ...XEUtils.treeOneData(res["Data"], "TypeId", "ParentId", "children")];
}

const subData = async () => {
  if (!formData.value.ServiceDes || !formData.value.ServiceTitle  || !formData.value.ServiceSubTitle) {
    Message.error("请填写红色标注的必填项!")
    return
  }
  if (TypeIdArr.value.length === 0) {
    Message.error("请选择分类")
    return
  }
  formData.value.ServiceCon = editor.value.content
  let Obj = {}
  Obj["ServiceCon"] = formData.value.ServiceCon;
  Obj["TypeId"] = TypeIdArr.value.toString();
  Obj["ServiceImg"] = formData.value.ServiceImg;
  Obj["ServiceTitle"] = formData.value.ServiceTitle;
  Obj["ServiceSubTitle"] = formData.value.ServiceSubTitle;
  Obj["ServiceDes"] = formData.value.ServiceDes;
  Obj["Recommend"] = formData.value.Recommend;
  Obj["Hot"] = formData.value.Hot;
  Obj["ClicksNumber"] = formData.value.ClicksNumber;
  if (formData.value.ServiceId === 0) {
    Obj["UserAccount"] = userData.UserAccount;
    await Http.serviceAdd(Obj)
  } else {
    Obj["ServiceId"] = formData.value.ServiceId;
    await Http.serviceEdit(Obj)
  }
  setTimeout(async () => {
    backUrl()
  }, 1000);
}

const backUrl = () => {
  router.push('/serviceManage/serviceList')
}

function setImage(data) {
  formData.value.ServiceImg = data;
  isEditImage.value = false;
}

function cascader(TypeId) {
  TypeIdArr.value = []
  typeData.value.forEach((d) => {
    if (d["TypeId"] === TypeId) {
      TypeIdArr.value = [d["ParentId"], TypeId]
    }
  })
}
</script>

<template>
  <a-card class="">
    <a-form :model="formData" @submit="subData()" auto-label-width>
      <a-form-item label="主标题" required>
        <a-input v-model="formData.ServiceTitle" placeholder="标题(必填)"/>
      </a-form-item>
      <a-form-item label="副标题" required>
        <a-input v-model="formData.ServiceSubTitle" placeholder="副标题(必填)"/>
      </a-form-item>
      <a-form-item label="分类" required>
        <a-space>

          <a-cascader v-model="formData.TypeId" :options="typeTreeData" style="width:380px;" :field-names="{ label: 'TypeName',
      value: 'TypeId'}" placeholder="按分类筛选,支持输入搜索分类" expand-trigger="hover"
                      allow-search allow-clear @change="cascader"/>

          <a-button @click="router.push('/serviceManage/serviceType')">管理服务分类</a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="是否推荐">
        <a-switch v-model="formData.Recommend">
          <template #checked>
            推荐
          </template>
          <template #unchecked>
            不推荐
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item label="是否热门">
        <a-switch v-model="formData.Hot">
          <template #checked>
            热门
          </template>
          <template #unchecked>
            不热门
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item label="缩略图">
        <a-space>
          <a-image v-show="formData.ServiceImg" :src="getImgUrl(formData.ServiceImg)" width="50" height="50"/>
          <a-input v-model="formData.ServiceImg" style="width: 500px;" placeholder="缩略图"/>
          <a-button type="primary" @click="isEditImage=true">{{ formData.ServiceImg ? '编辑' : '添加' }}</a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="简介" required>
        <a-textarea v-model="formData.ServiceDes" placeholder="简介" show-word-limit/>
      </a-form-item>
      <a-form-item label="内容">
        <editor :value="formData.ServiceCon" ref="editor"></editor>
      </a-form-item>
      <a-form-item label="添加人" required>
        <a-input v-model="formData.UserAccount" placeholder="添加人" disabled/>
      </a-form-item>
      <a-form-item label="访问次数">
        <a-input v-model="formData.ClicksNumber" placeholder="访问次数"/>
      </a-form-item>
      <a-form-item label="添加时间">
        <a-date-picker v-model="formData.CreateTime" format="YYYY-MM-DD HH:mm:ss" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit">{{ formData.ServiceId === 0 ? "提交" : "编辑" }}</a-button>
          <a-button @click="backUrl()">返回</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-card>
  <a-modal :width="1500" title="选择产品图片" v-model:visible="isEditImage" :footer="null" @cancel="isEditImage=false">
    <div style="height: 700px;overflow-y:auto;overflow-x:hidden; ">
      <edit-image :type-id="1" :is-return="true" @setImage="setImage"/>
    </div>
  </a-modal>
</template>

<style scoped lang="less">

</style>
